<template>
  <div class="guns-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="标签名称:">
              <a-input class="input-class" placeholder="标签名称" @keydown.enter="reload" v-model:value="where.name"
                allow-clear />
            </a-form-item>
            <a-form-item label="状态:" name="status">
              <a-select v-model:value="where.status" placeholder="请选择状态" allow-clear class="status-class">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="Y">正常</a-select-option>
                <a-select-option value="N">停用</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable :canResize="false" ref="tableRef" :api="StyleInfoApi.findPage" :where="where" :columns="columns"
          rowKey="id" showTableSetting :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
            onChange: onSelectChange,
          }">
          <!-- table上边工具栏 -->
          <template #toolbar>
            <div class="table-toolbar">
              <a-space>
                <a-button type="primary" @click="openAdd()">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  <span>添加</span>
                </a-button>
              </a-space>
            </div>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'style'">
              <a @click="openEdit(record)">{{ record.style }}</a>
            </template>

            <!-- table列表状态栏 -->
            <!-- Y：热门，N：不热门 -->
            <template v-if="column.key === 'hotFlag'">
              <a-switch checked-children="是" un-checked-children="否" default-checked :checked="record.status === 'Y'"
                @change="(checked) => editHotFlag(checked, record)" />
            </template>
            <!-- table操作栏按钮 -->
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定启用此标签吗？" @confirm="remove(record, 'Y')" v-if="record.status === 'N'">
                  <a>启用</a>
                </a-popconfirm>
                <a-popconfirm title="确定停用此标签吗？" @confirm="remove(record, 'N')" v-if="record.status === 'Y'">
                  <a>停用</a>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>
    </div>

    <!-- 新增弹窗 -->
    <styleInfo-add v-model:visible="showAdd" @done="reload" :isUpdate="isUpdate" :data="current" :org-list="orgLists" />
  </div>
</template>

<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref, createVNode } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import StyleInfoAdd from './styleInfoAdd.vue';
import { StyleInfoApi } from '/@/api/touch/styleInfo/StyleInfoApi';
import { message, Modal } from 'ant-design-vue';

// 查询条件
const where = reactive({
  name: '',
  status: ''
});

const columns = ref<object[]>([
  {
    title: '编号',
    dataIndex: 'styleNo',
  },
  {
    title: '标签名称',
    dataIndex: 'name',
  },

  {
    title: '关联智能体数量',
    dataIndex: 'agentRelNum',
  },
  {
    title: '关联图片数量',
    dataIndex: 'picRelNum',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    customRender: function ({ text }) {
      if ('Y' === text) {
        return '正常';
      } else {
        return '停用';
      }
    },
  },
  {
    title: '操作',
    key: 'action',
    width: 280,
    align: 'center',
  },
]);

const previewOptions = ref({
  // 设置图片预览时的样式，包括宽度和高度
  style: {
    width: '800px', // 预览时的宽度
    height: '600px', // 预览时的高度
  },
});

// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);

// 是否显示新增弹框
const showAdd = ref<boolean>(false);
const isUpdate = ref<boolean>(false);

// 是否显示新增编辑弹框
const showEdit = ref<boolean>(false);

// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */
const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
  where.name = '';
  where.status = '';
  reload();
};
const orgLists = ref<any>([]);
// onMounted(async () => {
//   orgLists.value = await TagStyleInfoApi.tree();
// });

// 表格选中改变
const onSelectChange = (selectedRowKeys: (string | number)[]) => {
  checkedKeys.value = selectedRowKeys;
};

/**
 * 打开新增弹窗
 *
 * @author yxx
 * @date 2022/04/04 12:24
 */
const openAdd = () => {
  showAdd.value = true;
  isUpdate.value = false;
  current.value = {};
};

/**
 * 打开编辑弹窗
 *
 * @author fengshuonan
 * @date 2021/4/2 17:03
 */
const openEdit = (row) => {
  console.log('row', row);
  current.value = row;
  showAdd.value = true;
  isUpdate.value = true;
};

/**
 * 修改状态
 *
 */
const editHotFlag = async (checked: boolean, row: any) => {
  const id = row.id;
  // 标签状态：1-启用，2-禁用
  const hotFlag = checked ? 'Y' : 'N';
  let result = await StyleInfoApi.updateStatus({ id, hotFlag });
  console.log(result);
  //message.success(result.message);
  reload();
};

/**
 * 修改热门状态
 *
 */
const editNewFlag = async (checked: boolean, row: any) => {
  const id = row.id;
  // 职位状态：1-启用，2-禁用
  const newFlag = checked ? 'Y' : 'N';
  let result = await TagStyleInfoApi.updateStatus({ id, newFlag });
  console.log(result);
  // message.success(result.message);
  reload();
};

/**
 * 批量删除
 *
 */
// const removeBatch = () => {
//   showEdit.value = false;
//   if (!checkedKeys.value.length) {
//     message.error('请至少选择一条数据');
//     return;
//   }
//   Modal.confirm({
//     title: '提示',
//     content: '确定要删除选中的职位吗?',
//     icon: createVNode(ExclamationCircleOutlined),
//     maskClosable: true,
//     onOk: async () => {
//       let params = checkedKeys.value;
//       const result = await TagStyleInfoApi.batchDel({ ids: params });
//       message.success(result.message);
//       reload();
//     },
//   });
// };

const remove = async (row: any, status: any) => {
  const result = await StyleInfoApi.updateStatus({ styleNo: row.styleNo, status: status });
  message.success(result.message);
  reload();
};
</script>
<style scoped>
:deep(.ant-image-preview-img-wrapper .ant-image-preview-img img) {
  max-width: 400px !important;
  max-height: 400px !important;
}

:deep(ant-select) {
  border-radius: 10px;
}


.status-class {
  width: 120px;
  border-radius: 10px;
}
</style>
